styled component 다른 컴포넌트를 가져와서 extending styled-component 작성 시 스타일 적용 안되는 경우 아래와 같이, Nav 파일의 NavLogo는 Nav를 import해서 extending 형식으로 width를 설정하려고 하지만, 적용 안됨 공식문서를 살펴본 결과, 아래와 같이 className을 넣어야 적용된다고 나와있음 Logo.js 파일을 아래와 같이 수정한 결과 작동 확인!... extending stylestyled componentextending style IM 35일차 styled-component 변수 적용 방법 제대로 확인. 그동안 잘못쓰고 있었다. 기본 사용 방식 변수 적용 하려고 써먹었던 방식 실제 적용 방식 youtube 대충 카피 프로젝트 대충 마무리 leetcode Keyboard Row (easy) First Unique Character in a String (easy) scss 도 활용을 생각해보면 좋을것 같다. typescript 공부 ... IM코스leetcodestyled componentIM코스 TIL-40 React Styled Components 💅 CSS 클래스 명에 대한 고민은 여전하다. ex. BEM (.block__element--modifier, button button--state-success) 정해진 가이드가 없으면 구조가 복잡해진다. 방대한 스타일 정보로 인한 스크롤 지옥도 존재 여전히 CSS 클래스로 조건부 스타일링을 하고 있다. CSS 클래스로 조건부 스타일링을 하더라도 동적인 변화를 표현하기에 한계가 있다 - ex.... styled componentReactReact TIL 34 styled-component의 활용 이번에 맡게 된 프로젝트의 프론트 부분을 구현하면서 styled-component를 사용했다. 부트캠프 파이널 프로젝트에서 한번 사용한 경험이 있었기 때문에 바로 적용할 수 있었는데 그 중 새로 알게 된 내용에 대해 정리해본다. 상위 스타일 컴포넌트에서 하위 스타일 컴포넌트 선택 아래 코드는 스타일 컴포넌트의 기초 코드다. 보통은 Container, Item 따로 따로 스타일을 지정해준다. ... TILstyled componentTIL [React] 13. 컴포넌트 스타일링 (2) CSS Module은 CSS를 불러와서 사용할 때 크래스 이름을 고유한 값 형태로 만들어 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지하는 기술이다. src/CSSModule.module.css 파일을 생성하여 다음과 같이 작성했다. 그 후, CSS Module을 사용하는 컴포넌트를 만들기 위해 src/CSSModule.js 파일을 생성하여 다음과 같이 작성했다. 위 코드에서 ES6 문... classnamesstyled componentCSS ModuleSassCSS Module React 프로젝트 환경셋팅 하기 - boilerplate 만들기 ESLint, Prettier 🐝 몇 가지 작업 환경 셋팅 - 여러가지가 있으니 설정해보시고 안하셔도 됩니다. code > preferences > settings 로가서 환경설정 화면 킨다음 좌측 아이콘 모양 눌러주면 setting.json 파일로 들어갈 수 있습니다 🐝 확장팩 설치 - 테트리스 같은 버튼을 누르고 원하는 확장팩 설치 🐝 설치 및 버전 확인 🐝 설치 및 버전 확인 🐝 작업 ... ESLinttypescriptPrettierreact.jsstyled componentESLint 블로그만들기(4) - styled-component 이전 프로젝트에서는 페이지, 컴포넌트를 디자인하기 위해 css-in-js 라이브러리인 @emotion을 통해 styled component를 생성해서 디자인을 진행했는데 이번 프로젝트에서는 styled-component 라이브러리를 통해 디자인했다. styled-component를 통해 코드를 작성하기 전에 먼저 설정해주어야하는 부분이 있다. Next.js Docs에서는 css-in-js라이... Reactstyled componentbabelnextjsReact vscode에 styled-component 문법 하이라이팅 하기 vscode에서 Styled Component를 사용하면 하이라이팅이 적용이 안되고 그냥 문자열 형태로만 입력된다. 또한 스타일을 정의할 때에도 하나씩 적어야하는 불편함이 있었다. 찾아보니 생각보다 가까운 곳에 답이 있었다! vscode extenstion에서 vscode-styled-components를 설치하면 끝! 정말 간단하다. 설치만 해줘도 Styled Component를 사용하는 ... Reactextenstionreact nativestyled componentvscodeReact Styled Component__[props 조회하기] 1) Props 조회 styled.div옆의 <>은 타입 명시이기 때문에 써주면 좋지만, 안써줘도 props 조회가 가능하다. 2) basic element에 style 주입 아래의 코드에서 여러개의 Product 컴포넌트를 감싸는 div는 ProductList로 명명하는 것이 적절할 것이다. 하지만 ProductList는 이미 해당 함수형 컴포넌트에서 사용중이다. styled compone... styled componentTILTIL
다른 컴포넌트를 가져와서 extending styled-component 작성 시 스타일 적용 안되는 경우 아래와 같이, Nav 파일의 NavLogo는 Nav를 import해서 extending 형식으로 width를 설정하려고 하지만, 적용 안됨 공식문서를 살펴본 결과, 아래와 같이 className을 넣어야 적용된다고 나와있음 Logo.js 파일을 아래와 같이 수정한 결과 작동 확인!... extending stylestyled componentextending style IM 35일차 styled-component 변수 적용 방법 제대로 확인. 그동안 잘못쓰고 있었다. 기본 사용 방식 변수 적용 하려고 써먹었던 방식 실제 적용 방식 youtube 대충 카피 프로젝트 대충 마무리 leetcode Keyboard Row (easy) First Unique Character in a String (easy) scss 도 활용을 생각해보면 좋을것 같다. typescript 공부 ... IM코스leetcodestyled componentIM코스 TIL-40 React Styled Components 💅 CSS 클래스 명에 대한 고민은 여전하다. ex. BEM (.block__element--modifier, button button--state-success) 정해진 가이드가 없으면 구조가 복잡해진다. 방대한 스타일 정보로 인한 스크롤 지옥도 존재 여전히 CSS 클래스로 조건부 스타일링을 하고 있다. CSS 클래스로 조건부 스타일링을 하더라도 동적인 변화를 표현하기에 한계가 있다 - ex.... styled componentReactReact TIL 34 styled-component의 활용 이번에 맡게 된 프로젝트의 프론트 부분을 구현하면서 styled-component를 사용했다. 부트캠프 파이널 프로젝트에서 한번 사용한 경험이 있었기 때문에 바로 적용할 수 있었는데 그 중 새로 알게 된 내용에 대해 정리해본다. 상위 스타일 컴포넌트에서 하위 스타일 컴포넌트 선택 아래 코드는 스타일 컴포넌트의 기초 코드다. 보통은 Container, Item 따로 따로 스타일을 지정해준다. ... TILstyled componentTIL [React] 13. 컴포넌트 스타일링 (2) CSS Module은 CSS를 불러와서 사용할 때 크래스 이름을 고유한 값 형태로 만들어 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지하는 기술이다. src/CSSModule.module.css 파일을 생성하여 다음과 같이 작성했다. 그 후, CSS Module을 사용하는 컴포넌트를 만들기 위해 src/CSSModule.js 파일을 생성하여 다음과 같이 작성했다. 위 코드에서 ES6 문... classnamesstyled componentCSS ModuleSassCSS Module React 프로젝트 환경셋팅 하기 - boilerplate 만들기 ESLint, Prettier 🐝 몇 가지 작업 환경 셋팅 - 여러가지가 있으니 설정해보시고 안하셔도 됩니다. code > preferences > settings 로가서 환경설정 화면 킨다음 좌측 아이콘 모양 눌러주면 setting.json 파일로 들어갈 수 있습니다 🐝 확장팩 설치 - 테트리스 같은 버튼을 누르고 원하는 확장팩 설치 🐝 설치 및 버전 확인 🐝 설치 및 버전 확인 🐝 작업 ... ESLinttypescriptPrettierreact.jsstyled componentESLint 블로그만들기(4) - styled-component 이전 프로젝트에서는 페이지, 컴포넌트를 디자인하기 위해 css-in-js 라이브러리인 @emotion을 통해 styled component를 생성해서 디자인을 진행했는데 이번 프로젝트에서는 styled-component 라이브러리를 통해 디자인했다. styled-component를 통해 코드를 작성하기 전에 먼저 설정해주어야하는 부분이 있다. Next.js Docs에서는 css-in-js라이... Reactstyled componentbabelnextjsReact vscode에 styled-component 문법 하이라이팅 하기 vscode에서 Styled Component를 사용하면 하이라이팅이 적용이 안되고 그냥 문자열 형태로만 입력된다. 또한 스타일을 정의할 때에도 하나씩 적어야하는 불편함이 있었다. 찾아보니 생각보다 가까운 곳에 답이 있었다! vscode extenstion에서 vscode-styled-components를 설치하면 끝! 정말 간단하다. 설치만 해줘도 Styled Component를 사용하는 ... Reactextenstionreact nativestyled componentvscodeReact Styled Component__[props 조회하기] 1) Props 조회 styled.div옆의 <>은 타입 명시이기 때문에 써주면 좋지만, 안써줘도 props 조회가 가능하다. 2) basic element에 style 주입 아래의 코드에서 여러개의 Product 컴포넌트를 감싸는 div는 ProductList로 명명하는 것이 적절할 것이다. 하지만 ProductList는 이미 해당 함수형 컴포넌트에서 사용중이다. styled compone... styled componentTILTIL